import React, { useState } from 'react';
import { Card, Row, Col, Button, Tag, Typography, Divider } from 'antd';
import {
  persistMemoryStore,
  refreshToken
} from '../../api/auth';

const { Title, Text } = Typography;

// 添加StorageStatus组件的props接口
interface StorageStatusProps {
  storageType: string;
  onUpdate: () => void;
}

const StorageStatus = ({ storageType, onUpdate }: StorageStatusProps) => {
  const [loading, setLoading] = useState(false);
  
  const handlePersist = async () => {
    setLoading(true);
    try {
      await persistMemoryStore();
      if (onUpdate) onUpdate();
    } catch (error) {
      console.error('Persist failed', error);
    } finally {
      setLoading(false);
    }
  };

  const getStorageColor = () => {
    switch(storageType) {
      case 'redis': return 'red';
      case 'memory': return 'blue';
      default: return 'default';
    }
  };

  return (
    <Card title="会话存储状态" style={{ marginBottom: 16 }}>
      <Row gutter={16} align="middle">
        <Col>
          <Text strong>当前存储类型:</Text>
        </Col>
        <Col>
          <Tag color={getStorageColor()} style={{ fontSize: 14 }}>
            {storageType.toUpperCase()}
          </Tag>
        </Col>
        <Col>
          <Button 
            type="link" 
            onClick={onUpdate}
            style={{ padding: 0 }}
          >
            刷新状态
          </Button>
        </Col>
      </Row>
      
      {storageType === 'memory' && (
        <>
          <Divider style={{ margin: '16px 0' }} />
          <Row gutter={16} align="middle">
            <Col>
              <Text>内存存储持久化:</Text>
            </Col>
            <Col>
              <Button 
                type="primary" 
                size="small"
                loading={loading}
                onClick={handlePersist}
              >
                保存到磁盘
              </Button>
            </Col>
          </Row>
        </>
      )}
    </Card>
  );
};

// 添加SessionActions组件的props接口
interface SessionActionsProps {
  onRefreshToken: () => Promise<void>;
}

const SessionActions = ({ onRefreshToken }: SessionActionsProps) => {
  const [loading, setLoading] = useState(false);
  
  const handleRefresh = async () => {
    setLoading(true);
    try {
      await refreshToken();
      if (onRefreshToken) onRefreshToken();
    } catch (error) {
      console.error('Token refresh failed', error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card title="会话管理操作">
      <Row gutter={16}>
        <Col span={24} style={{ marginBottom: 12 }}>
          <Button 
            block 
            type="primary" 
            ghost
            onClick={handleRefresh}
            loading={loading}
          >
            刷新访问令牌
          </Button>
        </Col>
      </Row>
    </Card>
  );
};

// 添加SessionModule组件的props接口
interface SessionModuleProps {
  storageType: string;
  onRefreshStorage: () => void;
  onRefreshToken: () => Promise<void>;
}

const SessionModule = ({ 
  storageType, 
  onRefreshStorage, 
  onRefreshToken 
}: SessionModuleProps) => {
  return (
    <div style={{ marginBottom: 24 }}>
      <Row gutter={16}>
        <Col span={12}>
          <StorageStatus 
            storageType={storageType} 
            onUpdate={onRefreshStorage} 
          />
        </Col>
        <Col span={12}>
          <SessionActions onRefreshToken={onRefreshToken} />
        </Col>
      </Row>
    </div>
  );
};

export default SessionModule;